<template>
  <div class="nav_search_box" @click.stop="() => {}">
    <div class="nav_search">
      <div class="nav_searchform">
        <input
          type="text"
          autocomplete="off"
          accesskey="s"
          x-webkit-speech
          x-webkit-grammar="builtin:translate"
          placeholder="搜索吧"
          title="搜索吧"
          class="nav_search_keyword"
          @click="openSuggest"
        />
        <div class="nav_search_btn">
          <div class="nav_search_submit iconfont icon-sousuo"></div>
        </div>
      </div>
      <div
        class="suggest_wrap header_search_suggest"
        @click="openSuggest"
        v-if="suggestShow"
      >
        <div class="history">
          <div class="header">
            <div class="title">搜索历史</div>
            <div class="clear">清空</div>
          </div>
          <div class="histories_wrap">
            <div class="histories">
              <div class="history_item">
                <div class="history_text">liella</div>
                <div class="close">
                  <i class="iconfont icon-guanbi1"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="trending">
          <div class="header">
            <div class="title">热搜</div>
          </div>
          <!-- 单列 -->
          <div class="trendings_single" v-if="true">
            <div class="trending_item">
              <div class="rank search_rank_top">1</div>
              <div class="trending_text">俄乌局势</div>
              <img src="/static/mark/new.png" class="trending_mark" />
            </div>
          </div>
          <!-- 双列 -->
          <div class="trendings_double" v-else>
            <div class="trendings_col" style="max-height: 236.5px">
              <div class="trending_item">
                <div class="rank search_rank_top">1</div>
                <div class="trending_text">俄乌局势</div>
                <img src="/static/mark/new.png" class="trending_mark" />
              </div>
              <div class="trending_item">
                <div class="rank search_rank_top">2</div>
                <div class="trending_text">俄乌局势</div>
                <img src="/static/mark/new.png" class="trending_mark" />
              </div>
              <div class="trending_item">
                <div class="rank search_rank_top">3</div>
                <div class="trending_text">俄乌局势</div>
                <img src="/static/mark/new.png" class="trending_mark" />
              </div>
              <div class="trending_item">
                <div class="rank">4</div>
                <div class="trending_text">俄乌局势</div>
                <img src="/static/mark/new.png" class="trending_mark" />
              </div>
              <div class="trending_item">
                <div class="rank">5</div>
                <div class="trending_text">俄乌局势</div>
                <img src="/static/mark/new.png" class="trending_mark" />
              </div>
            </div>
            <div class="trendings_col" style="max-height: 236.5px">
              <div class="trending_item">
                <div class="rank">6</div>
                <div class="trending_text">俄乌局势</div>
                <img src="/static/mark/new.png" class="trending_mark" />
              </div>
              <div class="trending_item">
                <div class="rank">7</div>
                <div class="trending_text">俄乌局势</div>
                <img src="/static/mark/new.png" class="trending_mark" />
              </div>
              <div class="trending_item">
                <div class="rank">8</div>
                <div class="trending_text">俄乌局势</div>
                <img src="/static/mark/new.png" class="trending_mark" />
              </div>
              <div class="trending_item">
                <div class="rank">9</div>
                <div class="trending_text">俄乌局势</div>
                <img src="/static/mark/new.png" class="trending_mark" />
              </div>
              <div class="trending_item">
                <div class="rank">10</div>
                <div class="trending_text">俄乌局势</div>
                <img src="/static/mark/new.png" class="trending_mark" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      suggestShow: false,
      docCB: null,
    };
  },
  methods: {
    docAddEvent(type, cb) {
      this.docCB = () => {
        cb();
        this.docRemoveEvent(type, this.docCB);
      };
      document.documentElement.addEventListener(type, this.docCB);
    },
    docRemoveEvent(type, cb) {
      document.documentElement.removeEventListener(type, cb);
    },
    openSuggest() {
      if (this.suggestShow) return;
      this.suggestShow = true;
      this.docAddEvent("click", this.hiddenSuggest);
    },
    hiddenSuggest() {
      this.suggestShow = false;
    },
  },
};
</script>

<style lang="scss">
.nav_search_box {
  margin: 0 10px;
  width: 500px;
  transition: width 0.3s;
}
.nav_search {
  position: relative;
  .nav_searchform {
    background-color: #f4f4f4;
    border: 1px solid #e7e7e7;
    display: block;
    padding: 0 38px 0 16px;
    border-radius: 2px;
    .nav_search_keyword {
      width: 100%;
      height: 34px;
      border: none;
      background-color: transparent;
      box-shadow: none;
      color: #999;
      font-size: 14px;
      line-height: 34px;
      transition: all 0.2s;
      overflow: hidden;
      word-break: break-all;
    }
    .nav_search_btn {
      position: absolute;
      top: 0;
      right: 0;
      width: 48px;
      height: 36px;
      border: none;
      border-radius: 2px;
      background-color: #e7e7e7;
      line-height: 26px;
      cursor: pointer;
      .nav_search_submit {
        position: absolute;
        top: 8px;
        right: 16px;
        border: none;
        color: #505050;
        background-color: transparent;
        font-size: 16px;
        line-height: 20px;
        cursor: pointer;
        transition: all 0.2s;
      }
      &:hover .nav_search_submit {
        color: #00a1d6;
      }
      .iconfont {
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        font-weight: bold;
      }
    }
  }
  .header_search_suggest {
    width: 100%;
    z-index: 10000;
  }
  .suggest_wrap {
    position: absolute;
    background-color: #fff;
    border: 1px solid #e6e9ee;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    padding: 16px 0;
    margin-top: 2px;
    font-family: PingFang SC, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #212121;
    overflow-y: auto;
    min-width: 236px;
    max-height: 612px;
    -webkit-font-smoothing: antialiased;
    z-index: 100;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      .title {
        height: 24px;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
      }
      .clear {
        font-size: 12px;
        line-height: 15px;
        height: 15px;
        color: #999;
        cursor: pointer;
      }
    }
    .histories_wrap {
      padding: 0 16px;
      overflow: hidden;
      .histories {
        display: flex;
        flex-wrap: wrap;
        margin: 12px -10px 4px 0;
        .history_item {
          position: relative;
          box-sizing: border-box;
          height: 30px;
          padding: 7px 10px 8px 10px;
          font-size: 12px;
          line-height: 15px;
          background-color: #f4f4f4;
          border-radius: 4px;
          margin: 0 10px 10px 0;
          cursor: pointer;
          .history_text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 96px;
          }
          .close {
            display: none;
            box-sizing: border-box;
            position: absolute;
            width: 16px;
            height: 16px;
            top: -6px;
            right: -6px;
            padding: 2px;
            color: #ccc;
            transform: scale(0.7);
          }
          &:hover {
            outline: none;
            color: #00a1d6;
          }
          &:hover .close {
            display: block;
          }
        }
      }
    }
    .trendings_double {
      display: flex;
      .trendings_col {
        flex: 1;
        &:first-child {
          margin-right: 10px;
        }
      }
    }
    .trending_item {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      height: 38px;
      cursor: pointer;
      padding-left: 16px;
      .rank {
        width: 15px;
        min-width: 15px;
        word-break: initial;
        height: 17px;
        line-height: 17px;
        text-align: center;
        font-weight: 500;
        font-size: 14px;
        margin-right: 7px;
        color: #999;
        &.search_rank_top {
          color: #212121;
        }
      }
      .trending_text {
        font-size: 14px;
        line-height: 17px;
        height: 17px;
        margin-right: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0;
      }
      .trending_mark {
        height: 14px;
        margin-right: 16px;
      }
      &:hover {
        background-color: #f4f4f4;
        outline: none;
      }
    }
  }
}
</style>